<template>
  <ul class="ul3">
    <li class="border-bottom" v-for="itemr of list" :key="itemr.id"> <!-- 第三层 -->
    <div>
      <div class="left">
        <p class="left-p1">{{itemr.title}}</p>
        <p class="left-p2"><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" /> 23:59前可订明日</p>
        <p class="left-p3">预订须知</p>
      </div>
      <div class="right">
        <span class="li2-color">￥<i class="li2-size">{{itemr.price}}</i></span>
        <span class="right-span">预定</span>
      </div>
    </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Detass',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
.ul3
  overflow auto
  background-color #F5F5F5
  li
    overflow auto
  .left
    width 65%
    float left
    padding-left 0.2rem
    p
      padding-bottom 0.2rem
    .left-p1
      padding-top 0.2rem
    .left-p2
      color #616161
      img
        width 0.2rem
  .right
    width 35%
    height 1.92rem
    float left
    display flex
    flex-direction column
    align-items center
    justify-content center
    .li2-color
      color #FF9800
      .li2-size
        font-size 0.44rem
    .right-span
      display inline-block
      width 80%
      text-align center
      padding 0.2rem 0
      background #FF9B17
      border-radius 0.1rem
      color white
</style>
